<!--
 * @Author: your name
 * @Date: 2023-10-03 23:57:48
 * @LastEditTime: 2023-10-04 00:29:53
 * @LastEditors: DESKTOP-536UVPC
 * @Description: In User Settings Edit
 * @FilePath: \css-special-effects\展开动画.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>展开动画</title>
</head>
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4096975_w98djv8agrm.css">
<body>
    <div class="item" onclick="alert('weixin')">
        <div>
            <span class="iconfont icon-weixin"></span>
        </div>
    </div>
    <div class="item" onclick="alert('douyin')">
        <div>
            <span class="iconfont icon-douyin"></span>
        </div>
    </div>
    <div class="item" onclick="alert('wegame')">
        <div>
            <span class="iconfont icon-wegame"></span>
        </div>
    </div>
    <div class="item" onclick="alert('steam')">
        <div>
            <span class="iconfont icon-steam"></span>
        </div>
    </div>
</body>
<style>
    body{
        height: 100vh;
        display: flex;
        justify-content: center;
        /* 纵向排列 */
        flex-direction: column;
        align-items: center;
        margin: 0;
        background-color: #090f35;
    }
    .item{
        display: inline-block;
        align-items: center;
        height: 60px;
        width: 60px;
        margin: 4px 8px;
        overflow: hidden;
        background-color: #c3c3c3;
        border-radius: 30px;
        box-shadow: 0px 10px 10px rgba(255, 255, 255, 0.2);
        transition: all 0.5s;
    }
    .item div{
        width: 60px;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 30px;
        font-size: 28px;
        position: relative;
        transition: all 0.5s;
    }
    .item div span{
        font-size: 24px;
    }
    .item:hover{
        width: 180px;
        border: none;
    }
    .item:hover div{
        background-color: #e9e9e9;
    }
    .item:hover:nth-child(1) div span{
        color: #3fc871;
    }
    .item:hover:nth-child(2) div span{
        color: #d1a93d;
    }
    .item:hover:nth-child(3) div span{
        color: #459dbb;
    }
    .item:hover:nth-child(4) div span{
        color: #ad36ce;
    }
    /* 设置提示文字盒子 */
    .item div::after{
        content: '';
        position: absolute;
        width: fit-content;
        word-break: keep-all;
        font-size: medium;
        left: 72px;
        pointer-events: auto;
        cursor: pointer;
    }
    .item:nth-child(1) div::after{
        content: '打开微信';
    }
    .item:nth-child(2) div::after{
        content: '打开抖音';
    }
    .item:nth-child(3) div::after{
        content: '打开GAME';
    }
    .item:nth-child(4) div::after{
        content: '打开STEME';
    }
</style>
</html>